<template>
  <div style="width: 100%;height: 100%; overflow: hidden;" @click="clickHandler">
    <div :style="style">
      {{ cptData.value }}

      <span v-show="option.attribute.showWeek">星期{{week}}</span>
    </div>
  </div>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {getDataJson} from "@/utils/refreshCptData"
import date from '@/utils/date'

const WEEKS = ['日', '一', '二', '三', '四', '五', '六']

export default {
  name: "widget-text",
  props: {
    option: Object
  },
  mixins: [refreshMixin],
  data() {
    return {
      cptData: {},
      uuid: null,
      week: ''
    }
  },
  created() {
    this.uuid = require('uuid').v1();
    this.refreshCptData();
  },
  watch: {
    'option.attribute': {
      handler() {
        this.loadData()
      },
      deep: true
    }
  },
  methods: {
    loadData() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      if(this.option.attribute.isAuto) {
        this.timer = setInterval(this.setValue, 1000)
      } else {
        getDataJson(this.option.cptDataForm, this.otherParam).then(res => {
          let timeStamp = Number(res.value)
          const _date = new Date(timeStamp)

          this.cptData = {
            value: date(_date, this.option.attribute.formatter)
          }
          this.week = WEEKS[_date.getDay()]

        })
      }
    },
    setValue() {
      const now = new Date()
      this.cptData = {
        value: date(now, this.option.attribute.formatter)
      }
      this.week = WEEKS[now.getDay()]
    }
  },
  computed: {
    style() {
      const option = this.option
      const style = {
        height: '100%',
        textAlign: option.attribute.textAlign,
        color: option.attribute.textColor,
        fontSize: option.attribute.textSize + 'px',
        fontStyle: option.attribute.fontStyle,
        fontWeight: option.attribute.fontWeight,
        lineHeight: option.attribute.textLineHeight + 'px',
        backgroundColor: option.attribute.bgColor,
        fontFamily: option.attribute.textFamily
      }

      if(option.attribute.isShadow) {
        style.textShadow = `${option.attribute.shadowOffsetX}px ${option.attribute.shadowOffsetY}px ${option.attribute.shadowBlur}px ${option.attribute.shadowColor}`
      }

      if(option.attribute.isGradual) {
        style.backgroundImage = option.attribute.gradualColor
        // style.backgroundClip = 'text'
        style['-webkit-background-clip'] = 'text'
        style.color = 'transparent'
      }

      return style
    }
  }
}
</script>

<style lang="less">


</style>
